<template>

  <el-space wrap direction="horizontal" alignment="flex-end" size="small">
    <el-card style="width: 110px; height: 70px" shadow="always">
          <span style="font-weight: bold">理赔管理</span>
    </el-card>
    <el-card style="width: 700px; height: 60px" shadow="hover">
      <el-space wrap size="small">
        <span>理赔单号</span>
        <el-input
            v-model="tableData.likeClaimId"
            style="max-width: 600px"
            placeholder="请输入"
            class="input-with-select"
        >
        </el-input>
        <span>保单号</span>
        <el-input
            v-model="tableData.likePolicyId"
            style="max-width: 600px"
            placeholder="请输入"
            class="input-with-select"
        />
        <el-button type="primary" @click="search" :icon="Search" />
      </el-space>
    </el-card>
  </el-space>

  <el-space wrap direction="vertical">
    <el-card style="width: 1200px">
      <el-table
          :data="tableData.claimData"
          height="500"
          style="width: 100%"
          size="large"
          table-layout="fixed"
          border
          stripe

          v-loading="loading"
          :element-loading-svg="svg"
          element-loading-svg-view-box="-10, -10, 50, 50"
          class="custom-loading-svg"
          element-loading-text="加载中..."
      >
        <el-table-column prop="claimId" label="理赔单号" width="160" align="center"/>
        <el-table-column prop="policyId" label="保单号" width="160" align="center"/>
        <el-table-column prop="claimDate" label="申请日期" width="160" sortable align="center"/>
        <el-table-column prop="status" label="理赔流程" width="400" align="left">
          <template #default="scope">
            <el-steps
                style="max-width: 600px"
                space="100%"
                align-center
                finish-status="success"
                :process-status="scope.row.status"
                :active="scope.row.steps"
            >
              <el-tooltip
                  class="box-item"
                  effect="light"
                  content="受理报案：被保险人发生保险事故及时向我司报案，我司将事故情况登录备案。"
                  placement="top-start"
              >
                <el-step
                    title="报案"
                    :icon="Phone"
                    status=""
                />
              </el-tooltip>
              <el-tooltip
                  class="box-item"
                  effect="light"
                  content="受理材料、立案：我司根据申请人提供的理赔申请材料进行审核，确定是否受理。"
                  placement="top-start"
              >
                <el-step
                    title="材料"
                    :icon="Tickets"
                    status=""
                />
              </el-tooltip>
              <el-tooltip
                  class="box-item"
                  effect="light"
                  content="调查：我司通过对有关证据的收集，核实保险事故以及材料的真实性。"
                  placement="top-start"
              >
                <el-step
                    title="调查"
                    :icon="Camera"
                    status=""
                />
              </el-tooltip>
              <el-tooltip
                  class="box-item"
                  effect="light"
                  content="审核：我司案件经办人根据相关证据认定客观事实、确定保险责任后精确计算给付金额，作出理赔结论。"
                  placement="top-start"
              >
                <el-step
                    title="审核"
                    :icon="Finished"
                    status=""
                />
              </el-tooltip>
              <el-tooltip
                  class="box-item"
                  effect="light"
                  content="签批：我司案件签批人对以上各环节工作进行复核，对核实无误的案件进行审批。"
                  placement="top-start"
              >
                <el-step
                    title="签批"
                    :icon="EditPen"
                    status=""
                />
              </el-tooltip>
              <el-tooltip
                  class="box-item"
                  effect="light"
                  content="通知、领款：我司通知受益人携带相关身份证明及关系证明，前来办理领款手续。"
                  placement="top-start"
              >
                <el-step
                    title="领款"
                    :icon="Money"
                    status=""
                />
              </el-tooltip>
            </el-steps>
          </template>
        </el-table-column>
        <el-table-column prop="claimAmount" label="应赔付金额" width="130" align="center" sortable/>
        <el-table-column label="执行" width="180" fixed="right" align="center">
          <template #default="scope">
            <el-space wrap>
              <el-button type="primary" plain style="border: solid; font-weight: bold" @click="pass(scope.row)">合格</el-button>
              <el-button type="danger" plain style="border: solid; font-weight: bold" @click="reject(scope.row)">未过</el-button>
            </el-space>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-card style="width: 1200px">
      <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[5, 10, 15, 20]"
          size="large"
          background
          layout="sizes, prev, pager, next, jumper, total"
          :total="tableData.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </el-card>
  </el-space>

</template>

<script setup>
import { reactive, ref } from "vue";
import axios from "axios"
import { Phone, Tickets, Camera, Finished, EditPen, Money, Search } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'

const loading = ref(true)
const currentPage = ref(1)
const pageSize = ref(5)
const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
        `

const tableData = reactive({
  claimData:[
    {
      claimId: 1237843,
      policyId: 12334512,
      claimDate: '2024/06/29',
      claimAmount: 123,
      status: "success",
      steps: 6
    }
  ],
  pageNum: 1,
  pageSize: 5,
  total: 0,
  likeClaimId: "",
  likePolicyId: ""
})


const loadingSleep = () => {
  loading.value = true;
  setTimeout(() => {
    loading.value = false; // 使用 `loading.value` 来更改响应式引用的值
  }, 2000); // 3000毫秒后执行上述函数
}
const load = () => {
  axios({
    method: "GET",
    url: "http://localhost:8080/boot/claim/findAllClaimLikeClaimIdAndPolicyId",
    params: {
      pageNum: tableData.pageNum,
      pageSize: tableData.pageSize,
      claimId: tableData.likeClaimId,
      policyId: tableData.likePolicyId
    }
  })
      .then((result) => {
        let pageInfo = result.data
        tableData.claimData = pageInfo.list
        tableData.total = pageInfo.total
        loadingSleep()
      })
}
load()


const search = () => {
  load()
  ElNotification({
    title: '查询成功',
    message: '查询结果已更新',
    type: 'success',
    offset: 50,
    showClose: false,
    duration: 1350
  })
}
const pass = (row) => {
  ElMessageBox.confirm(
      '确认是否通过当前审核?',
      '温馨提醒',
      {
        cancelButtonText: '取消',
        confirmButtonText: '确认',
        type: 'warning'
      }
  )
      .then(() => {
        if (row.status === "success") {
          ElMessage({
            type: 'error',
            message: '理赔已结束，不能再操作',
          })
        } else if (row.status === "error") {
          ElMessage({
            type: 'error',
            message: '审核未通过，不能再操作',
          })
        } else {
          axios({
            method: "POST",
            url: "http://localhost:8080/boot/claim/updatePassClaimStatusAndSteps",
            params: {
              claimId: row.claimId
            }
          })
          row.steps++
          if (row.steps === 6) {
            row.status = 'success'
          }

          ElMessage({
            type: 'success',
            message: '审核通过，流程已更新',
          })
        }
        loadingSleep()
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消',
        })
      })
}
const reject = (row) => {
  ElMessageBox.confirm(
      '确认当前审核是否不通过?',
      '温馨提醒',
      {
        cancelButtonText: '取消',
        confirmButtonText: '确认',
        type: 'warning'
      }
  )
      .then(() => {
        if (row.status === "success") {
          ElMessage({
            type: 'error',
            message: '理赔已结束，不能再操作',
          })
        } else if (row.status === "error") {
          ElMessage({
            type: 'error',
            message: '审核未通过，不能再操作',
          })
        } else {
          axios({
            method: "POST",
            url: "http://localhost:8080/boot/claim/updateRejectClaimStatusAndSteps",
            params: {
              claimId: row.claimId
            }
          })
          row.status = 'error'

          ElMessage({
            type: 'success',
            message: '审核不通过，流程已更新',
          })
        }
        loadingSleep()
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消',
        })
      })
}
const handleSizeChange = (number) => {
  tableData.pageSize = number
  load()
}
const handleCurrentChange = (number) => {
  tableData.pageNum = number
  load()
}
</script>

<style>
.input-with-select .el-input-group__prepend {
  background-color: var(--el-fill-color-blank);
}
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
.example-showcase .el-loading-mask {
  z-index: 9;
}
</style>